<template>
    <v-container grid-list-xl text-xs-center justify-center align-center fill-height>
        <v-layout row wrap>
            <v-flex xs4 offset-xs4>
                <v-form ref="form" v-model="valid" lazy-validation>
                    <v-text-field
                    v-model="name"
                    :rules="nameRules"
                    :counter="10"
                    label="Name"
                    required
                    ></v-text-field>
                    <v-text-field
                    v-model="password"
                    :rules="passwordRules"
                    label="Password"
                    type="password"
                    :counter="10"
                    required
                    @keyup.enter="submit"
                    ></v-text-field>
                    <v-btn @click="submit" color="info">
                        登录
                    </v-btn>
                </v-form>
                <v-alert v-model="alert" type="error" outline>
                    {{alertMessage}}
                </v-alert>
            </v-flex>
        </v-layout>
    </v-container>
</template>
<script>
export default {
  data: () => ({
    alert: false,
    alertMessage: '',
    valid: false,
    name: 'admin',
    nameRules: [v => !!v || 'Name is required', v => v.length <= 10 || 'Name must be less than 10 characters'],
    password: 'anon',
    passwordRules: [v => !!v || 'Password is required', v => v.length <= 10 || 'Password must be less than 10 characters']
  }),
  methods: {
    submit() {
      if (this.$refs.form.validate()) {
        // Native form submission is not yet supported
        // console.log('submit')
        if (this.name != 'admin' || this.password != 'anon') return (this.alertMessage = '账号密码错误'), (this.alert = true) ,setTimeout(() => {
            this.alert = false
        }, 2000);
        sessionStorage.setItem('app-token', JSON.stringify({name: 'Admin', token: 'token'}))
        this.$router.replace({name: 'Index'})
      }
    },
    clear() {
      this.$refs.form.reset()
    }
  },
  mounted() {
    // console.log(this.$vuetify.theme)
  }
}
</script>